<template>
  <div>tabs演示</div>
  <div>
    <ElTabs v-model="activeName">
      <ElTabPane name="tab1" label="面板一"></ElTabPane>
      <ElTabPane name="tab2" label="面板二"></ElTabPane>
      <ElTabPane name="tab3" label="面板三"></ElTabPane>
    </ElTabs>

    <div>
      {{ activeName }}
    </div>
    {{ 1 === '1' }}{{ 1 == '1' }}
    <!-- 面板一的内容 -->
    <div v-if="activeName === 'tab1'">
      面板一的内容
      <TabsOne></TabsOne>
    </div>
    <!-- 面板二的内容 -->
    <div v-if="activeName === 'tab2'">
      面板二的内容
      <TabsTwo></TabsTwo>
    </div>
    <!-- 面板三的内容 -->
    <div v-if="activeName === 'tab3'">
      面板三的内容
      <TabsThree></TabsThree>
    </div>

    <hr />
    <div class="buttons">
      <span
        :class="{ active: activeButton === d.key }"
        v-for="d in buttons"
        :key="d.key"
        @click="activeButton = d.key"
      >
        {{ d.text }} - {{ d.key }}
      </span>
    </div>

    <hr />

    <button @click="visible = !visible">控制页面显示</button>
    <!-- v-if是移除掉元素，v-show是设置display:none不显示元素 -->
    <div v-if="visible">显示效果一</div>
    <div v-show="visible">显示效果二</div>

    <!-- :class={'要动态添加或者移除的class名称'：是否添加的逻辑表达式} -->
    <div class="div01" :class="{ active: visible }">通过变量控制class属性</div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElTabs, ElTabPane, ElButton } from 'element-plus'
import TabsOne from './TabsOne.vue'
import TabsTwo from './TabsTwo.vue'
import TabsThree from './TabsThree.vue'

const activeName = ref('tab1')

const buttons = [
  {
    key: 'btn1',
    text: '按钮一',
  },
  {
    key: 'btn2',
    text: '按钮二',
  },
  {
    key: 'btn3',
    text: '按钮三',
  },
]

const activeButton = ref('btn1')

const visible = ref(true)
</script>

<style scoped lang="scss">
.buttons {
  margin: 1rem;
  > span {
    display: inline-block;
    margin: 0.5rem;
    padding: 0.2rem 1rem;
    border: 1px solid #dcdcdc;
    border-radius: 0.2rem;
    &:hover {
      cursor: pointer;
      border-color: #6ca6e8;
      background-color: #569ddb;
      color: azure;
    }
  }
  .active {
    border-color: #66beeb;
    background-color: #71a0e6;
    color: azure;
  }
}
.div01 {
  color: #569ddb;
}
.div01 .active {
  border: 1px solid #ebeef0;
}
</style>
